<template>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="PageData.currentPage"
      :page-sizes="PageData.pageSizes"
      :page-size="PageData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="PageData.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Paging",
  /**
   * PageData: {
   *  pageSizes: [5, 10, 50, 100],    //页面条数限制
   *  pageSize: 5,                    //当前页面条数
   *  currentPage: 1,                 //当前页码
   *  total: 2                        //总条数
   * }
   */
  props: ["PageData"],
  methods: {
    //每页显示条数变化时
    handleSizeChange(val) {
      this.tableDataPage.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    //当前页码变化时
    handleCurrentChange(val) {
      this.tableDataPage.currentPage = val;
      console.log(`当前页: ${val}`);
    },
  }
};
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 5px;  
  margin-bottom: 5px;
}
</style>